<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1合计总价</title>
    <script src="js/vue.js"></script>
    <style>
        #box{
            width: 400px;
            height: 400px;
            background-color: #61a1bc;
            margin: 20px auto;
        }
        .innerbox{
            width: 320px;
            height: 380px;
            margin: 0px auto;
            padding-top: 5px;
        }
        h1{
            text-align: center;
           font-weight: bolder;
        }
        ul{
            padding: 0;
        }
        li{
            list-style: none;
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-top: 10px;
            background-color: #8dc16e;
        }
        .left{
            float: left;
            display: block;
            width: 150px;
            height: 40px;
            margin-left: 20px;
        }
        .right{
            display: block;
           width: 50px;
           height: 40px;
           float: right;
           margin-right: 20px;
        }
        li.lastli{
           border-top: 1px #fff solid;
            background-color:#61a1bc;
        }
        .active{
            background-color: #e0c921;
        }
    </style>
</head>
<body>
    <div id="box">
       <div class="innerbox">
        <h1>Services</h1>
        <ul>
            <li @click="count(index,item)" v-for="(item,index) in arr" v-bind:class="{active:item.isShow}" :key="index">
                <span class="left">{{item.title}}</span>
                <span class="right">{{item.price}}</span>
            </li>
            <li class="lastli">
                <span class="left">Total</span>
                <span class="right">{{sum()}}</span>
            </li>
        </ul>
       </div>
    </div>    

    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                arr:[
                    {title:"Web Development",price:3000,isShow:false},
                    {title:"Python",price:1000,isShow:false},
                    {title:"Java",price:2000,isShow:false},
                    {title:"GO",price:2200,isShow:false}
                ]
            },
            methods: {
                count(index,item){
                  this.arr[index].isShow=!this.arr[index].isShow;
                },
                sum(){
                    var count=0;
                    for(var i=0;i<this.arr.length;i++){
                        if(this.arr[i].isShow){
                            count += this.arr[i].price
                        }
                    }
                    return count;
                }
            }
           

        })


    </script>
</body>
</html>